const { defineConfig } = require('@vue/cli-service')
// 导入通用提示
const defaultSettings = require('./src/settings')
// 使用配置标题
const name = defaultSettings.title
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? '/three-js-learning-page/' : '/',
  chainWebpack: config => {
    // 设置默认的标题名称 配合 路由beforeEach 默认不设置的话是项目名字
    config.plugin('html').tap(args => {
      args[0].title = name
      return args
    })
  },
  // 当前配置名称 多个配置生效
  configureWebpack: {
    // 配置标题名称
    name: name
  },
  // 设置静态资源目录
  assetsDir: 'assets',
  devServer: {
    // 开启的端口名称
    port: 8888,
    // 本地直接打开的页面路径
    open: 'http://localhost:8888'
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    loaderOptions: {
      scss: {
        // 导入sass全局变量
        additionalData:
          `
           @use "./src/styles/setting.scss" as *;
           @use "./src/styles/config.scss" as three;
           
          `
      }
    }
  }

})
